<template>
  <!--<el-dialog :close-on-click-modal="false" :visible.sync="visible" width="50%" class="pageStyle">-->
  <div width="50%" class="pageStyle">
    <div class="printWrap">
      <div class="paperBorder">
        <div id="printArea">
          <el-table
            :data="data"
            :cell-class-name="getCellClass"
            :header-cell-class-name="getHeaderCellClass"
            style="width:100%;border: 1px solid #000"
          >
            <el-table-column prop="name" header-align="center" align="center" label="物品名称"></el-table-column>
            <el-table-column prop="spec" header-align="center" align="center" label="规格"></el-table-column>
            <el-table-column prop="price" header-align="center" align="center" label="价格"></el-table-column>
            <el-table-column prop="unit" header-align="center" align="center" label="单位"></el-table-column>
            <el-table-column prop="amount" header-align="center" align="center" label="库存数量"></el-table-column>
            <el-table-column prop="updateTime" header-align="center" align="center" label="更新时间"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-button v-print="'#printArea'">打印</el-button>
    <el-button @click="close">关闭</el-button>
    <!--</el-dialog>-->
  </div>
</template>
<script>
  export default {
    data () {
      return {
        data: []
        // visible: false
      }
    },
    methods: {
      getCellClass ({row, column, rowIndex, columnIndex}) {
        if (columnIndex !== 0) {
          return 'otherCellClass'
        } else {
          return 'bottomCellClass'
        }
      },
      getHeaderCellClass ({row, column, rowIndex, columnIndex}) {
        if (columnIndex !== 0) {
          return 'otherHeaderCellClass'
        } else {
          return 'bottomHeaderCellClass'
        }
      },
      removeTabHandle (tabName) {
        this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
        if (this.mainTabs.length >= 1) {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            var tab = this.mainTabs[this.mainTabs.length - 1]
            this.$router.push({name: tab.name, query: tab.query, params: tab.params}, () => {
              this.mainTabsActiveName = this.$route.name
            })
          }
        } else {
          this.menuActiveName = ''
          this.$router.push({name: 'home'})
        }
      },
      close () {
        this.removeTabHandle(this.mainTabsActiveName)
      },
      init (array) {
        this.data = []
        this.data = array
        this.$nextTick(() => {
          this.visible = true
        })
      }
    },
    activated () {
      let data = this.$router.history.current.params.data
      console.log('传入的参数：', data)
      if (data != null) {
        // 传入参数为修改，没有参数为添加
        this.init(data)
      }
    },
    mounted () {
    },
    computed: {
      mainTabsActiveName: {
        get () {
          return this.$store.state.common.mainTabsActiveName
        },
        set (val) {
          this.$store.commit('common/updateMainTabsActiveName', val)
        }
      },
      mainTabs: {
        get () {
          return this.$store.state.common.mainTabs
        },
        set (val) {
          this.$store.commit('common/updateMainTabs', val)
        }
      }
    }
  }
</script>
<style>
  .pageStyle {
    text-align: center;
  }

  .printWrap {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
  }

  .paperBorder {
    display: flex;
    border: 1px solid #000;
  }

  #printArea {
    display: flex;
    width: 210mm;
    /*height: 290mm;*/
    padding: 20px;
  }

  .otherCellClass {
    border-left: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
  }

  .bottomCellClass {
    border-bottom: 1px solid #000 !important;
  }

  .otherHeaderCellClass {
    color: #000;
    font-size: 1.2em;
    border-left: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
  }

  .bottomHeaderCellClass {
    color: #000;
    font-size: 1.2em;
    border-bottom: 1px solid #000 !important;
  }

</style>

